<template>
  <!-- 添加或修改AI摄像头对话框 -->
  <el-dialog :title="title" v-model="open" width="740px" append-to-body>
    <el-form ref="surveillanceRef" :model="form" :rules="rules" label-width="100px" class="m-form-inline" inline>
          <el-form-item label="投放点名称" prop="deviceName">
              <el-input v-model="form.deviceName" placeholder="请输入投放点名称"/>
          </el-form-item>
      <el-form-item label="设备品牌" prop="deviceBrand">
        <el-input v-model="form.deviceBrand" placeholder="请输入设备品牌"/>
      </el-form-item>
      <el-form-item label="设备型号" prop="deviceModel">
        <el-input v-model="form.deviceModel" placeholder="请输入设备型号"/>
      </el-form-item>
      <el-form-item label="设备序列号" prop="serialNumber">
        <el-input v-model="form.serialNumber" placeholder="请输入设备序列号"/>
      </el-form-item>
      <el-form-item label="设备编号" prop="deviceNumber">
        <el-input v-model="form.deviceNumber" placeholder="请输入设备编号"/>
      </el-form-item>
      <el-form-item label="城市">
        <el-input v-model="cityInfo.name" placeholder="城市" disabled/>
      </el-form-item>

      <el-form-item label="区域" prop="areaCode">
        <!--          <el-input v-model="form.areaName" placeholder="请输入区域" />-->
        <el-select v-model="form.areaCode" @change="changeArea">
          <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id+''"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="街道" prop="streetCode">
        <el-select v-model="form.streetCode" @change="changeStreet">
          <el-option v-for="item in streetList" :key="item.id" :label="item.name" :value="item.id+''"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="社区" prop="communityCode">
<!--        <el-input v-model="form.community" placeholder="请输入社区"/>-->
        <el-select v-model="form.communityCode" @change="changeCommunity">
          <el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.id+''"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="小区名称" prop="residentialName">
<!--        <el-input v-model="form.residentialName" placeholder="请输入小区名称"/>-->
        <el-select v-model="form.residentialCode" @change="changeResidential" >
          <el-option v-for="item in residentialList" :key="item.id" :label="item.name" :value="item.id+''"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <el-input class="align-left" controls-position="left" style="width: 220px;" :controls="false" v-model="form.longitude" placeholder="经度" />
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input  class="align-left" controls-position="left"  style="width: 220px;" :controls="false" v-model="form.latitude" placeholder="纬度" />
      </el-form-item>
<!--      <el-form-item label="地址" prop="address">-->
<!--        <el-input v-model="form.address" placeholder="请输入地址" style="width:570px"/>-->
<!--      </el-form-item>-->
      <!--        <el-form-item label="ip地址" prop="ip">-->
      <!--          <el-input v-model="form.ip" placeholder="请输入ip地址" />-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="物理地址" prop="macAddress">-->
      <!--          <el-input v-model="form.macAddress" placeholder="请输入物理地址" />-->
      <!--        </el-form-item>-->
      <el-form-item label="备注信息" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注信息" style="width:570px"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup name="SurveillanceForm">
import {getSurveillance, addSurveillance, updateSurveillance} from "@/api/wvp/surveillance";
import {listChild, getAddressUnit} from "@/api/wvp/addressUnit";
import {changeRoleStatus} from "@/api/system/role";

const {proxy} = getCurrentInstance();
const emit = defineEmits(['close'])
const form = ref({})
const {wvp_device_status} = proxy.useDict('wvp_device_status');
const open = ref(false);
const title = ref("");
const areaList = ref([]);
const streetList = ref([]);
//社区列表
const communityList = ref([]);
//小区列表
const residentialList = ref([]);
const cityInfo = ref({id: "", name: ""});
const rules = ref({
  deviceName: [
    {required: true, message: "设备名称不能为空", trigger: "blur"}
  ],
  serialNumber: [
    {required: true, message: "设备序列号不能为空", trigger: "blur"}
  ],
  deviceNumber: [
    {required: true, message: "设备编号不能为空", trigger: "blur"}
  ],
  // proviceName: [
  //   { required: true, message: "省份名称不能为空", trigger: "blur" }
  // ],
  // cityName: [
  //   { required: true, message: "市名称不能为空", trigger: "blur" }
  // ],
  areaCode: [
    {required: true, message: "区域不能为空", trigger: "blur"}
  ],
  streetCode: [
    {required: true, message: "街道不能为空", trigger: "blur"}
  ],
  deviceBrand: [
    {required: true, message: "设备品牌不能为空", trigger: "blur"}
  ],
  deviceModel: [
    {required: true, message: "设备型号不能为空", trigger: "blur"}
  ],
  community: [
    {required: true, message: "社区不能为空", trigger: "blur"}
  ],
  residentialName: [
    {required: true, message: "小区不能为空", trigger: "blur"}
  ],
  address: [
    {required: true, message: "地址不能为空", trigger: "blur"}
  ],
  // latitude: [
  //   {required: true, message: "纬度不能为空", trigger: "blur"}
  // ],
  // longitude: [
  //   {required: true, message: "经度不能为空", trigger: "blur"}
  // ],
});

// 表单重置
function reset() {
  form.value = {
    id: null,
    deviceName: null,
    serialNumber: null,
    deviceNumber: null,
    proviceName: null,
    proviceCode: null,
    cityName: null,
    cityCode: null,
    areaName: null,
    areaCode: null,
    address: null,
    community: null,
    residentialName: null,
    ip: null,
    macAddress: null,
    deviceBrand: null,
    deviceModel: null,
    deviceStatus: null,
    lastPushTime: null,
    createTime: null,
    createBy: null,
    updateTime: null,
    updateBy: null,
    deleted: null,
    remark: null,
    streetName: null,
    streetCode: null,
    communityCode: null,
    residentialCode: null,
    longitude: null,
    latitude: null,
  };
  proxy.resetForm("surveillanceRef");
}

function cancel() {
  open.value = false;
  reset();
}


/** 提交按钮 */
function submitForm() {
  proxy.$refs["surveillanceRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateSurveillance(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          emit("close", false)
        });
      } else {
        addSurveillance(Object.assign({}, form.value, {
          cityCode: cityInfo.value.id,
          cityName: cityInfo.value.name
        })).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          emit("close", false)
        });
      }
    }
  });
}

function getCity() {
  getAddressUnit(1).then(res => {
    cityInfo.value = res.data;
  })
}

function getArea() {
  listChild(1).then(res => {
    areaList.value = res.data
  })
}

function listStreet(areaCode) {
  listChild(areaCode).then(res => {
    streetList.value = res.data
  })
}

function listCommunity(streetCode) {
  listChild(streetCode).then(res => {
    communityList.value = res.data
  })
}
function listResidentialList(communityCode) {
  listChild(communityCode).then(res => {
    residentialList.value = res.data
  })
}

function changeArea(areaCode) {
  form.value.streetCode = "";
  form.value.streetName = "";
  areaList.value.forEach(item => {
    if (item.id + '' === form.value.areaCode) {
      form.value.areaName = item.name
    }
  })
  listStreet(areaCode)
}

function changeStreet(streetCode) {
  streetList.value.forEach(item => {
    if (item.id + '' === form.value.streetCode) {
      form.value.streetName = item.name
    }
  })
  listCommunity(streetCode)
}
function changeCommunity(communityCode) {
  communityList.value.forEach(item => {
    if (item.id + '' === form.value.communityCode) {
      form.value.communityName = item.name
    }
  })
  listResidentialList(communityCode)
}
function changeResidential(residentialCode) {
  residentialList.value.forEach(item => {
    if (item.id + '' === form.value.residentialCode) {
      form.value.residentialName = item.name
    }
  })
}

function begin(id) {
  if (!id) {
    reset();
    open.value = true
    title.value = "添加AI摄像头";
    return;
  }
  getSurveillance(id).then(response => {
    form.value = response.data;
    listStreet(form.value.areaCode)
    listCommunity(form.value.streetCode)
    listResidentialList(form.value.communityCode)
    open.value = true;
    title.value = "修改AI摄像头";
  });
}

//获取区域
getArea();
//获取城市
getCity();
defineExpose({
  begin
})
</script>
<style lang="scss" scoped>
.m-form-inline .el-input {
  width: 220px;
}

.m-form-inline .el-select {
  width: 220px;
}

.m-form-inline .el-date-picker {
  width: 220px;
}
:deep(.el-input__wrapper) {
  input{
    text-align: left!important;
  }
}
.align-left {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
</style>
